<template>
  <div>
    <Header1></Header1>
    <jobClassify></jobClassify>
    <div style="width: 900px;margin-left: 500px">
      <div><!--搜索框-->
        <el-input placeholder="职位名称" v-model="form.positionName" clearable style="width: 150px"></el-input>
        <el-select placeholder="请选择工作经验" v-model="form.workExp" slot="prepend" style="width: 150px">
          <el-option label="全部"></el-option>
          <el-option label="在校" value="在校"></el-option>
          <el-option label="应届生" value="应届生"></el-option>
          <el-option label="1年以内" value="1年以内"></el-option>
          <el-option label="1-3年" value="1-3年"></el-option>
          <el-option label="3-5年" value="3-5年"></el-option>
          <el-option label="5年之上" value="5年之上"></el-option>
        </el-select>
        <el-select placeholder="工作属性" v-model="form.jobNature" slot="prepend" style="width: 150px">
          <el-option label="全职" value="全职"></el-option>
          <el-option label="兼职" value="兼职"></el-option>
        </el-select>
        <job v-on:job="getJobClick"></job>
        <el-input placeholder="岗位类型" v-model="form.bussionName" clearable style="width: 150px"></el-input>
        <el-button slot="append" icon="el-icon-search" @click="selectByName"></el-button>
      </div>
      <ul class="hot_pos reset" v-loading="loading">
        <li class="odd clearfix" v-for="item  in pageInfo.list" :key="item.positionId">

          <div class="hot_pos_l" style="border-left:3px solid #91cebe;overflow:hidden; padding:3px 12px;">
            <div class="mb10">
              <a @click="goPositionDetail(item.positionId)" target="_blank">
                <em style="font-style: normal; font-size:18px; color:#0d9572;">{{item.positionName}}</em>
              </a>&nbsp;
              <span class="c9" >[{{item.city}}]</span>
              <span style="color:#999;">{{makeDate(item.createTime)}}发布</span>
            </div>
            <span style="color:#e6775c;font-size:16px; float:none;">
              <em class="c7">月薪：</em>{{item.minSalary}}K-{{item.maxSalary}}K
            </span>
            <span><em class="c7">经验：</em> {{item.workExp}}</span>
            <span><em class="c7">最低学历： </em>{{item.eduRequirements}}</span>
            <br/>
            <span><em class="c7">职位诱惑：</em>{{item.welfare}}</span>
            <br/>

          </div>
          <div class="hot_pos_r">
            <div class="apply">
              <el-button type="warning"
                         @click="setApplicants(item.positionId)" size="mini" style="margin-top: 40px"
                         :disabled="!isUser">投个简历</el-button>
            </div>
            <div class="mb10">
              <a @click="goCompanyDetail(item.company.companyId)" style="font-style: normal; font-size:18px; color:#999999" target="_blank">{{item.companyName}}</a>
            </div>
            <span><em class="c7">领域： </em>{{item.company.business}}</span>
            <span><em class="c7">创始人：</em>{{item.company.chairman}}</span>
            <br/>
            <span><em class="c7">规模： </em>{{item.company.size}}人</span>
          </div>

        </li>
        <div style="float: right">
        <el-pagination
                background
                layout="prev, pager, next"
                :total="pageInfo.total"
                :page-size="pageInfo.pageSize"
                @current-change="handlePage"
        >
        </el-pagination>
      </div>

      </ul>
    </div>
  </div>
</template>

<script>
  import Header1 from "../header/Header"
  import jobClassify from "../index/index_jpbClassify/index_jobClassify"
  import job from "../jobclassify/Jobclassify"
  import {makeDate, makeSimpleDate} from "../../common/js/dateformat"

  export default {
    name: "position-select",
    data() {
      return {
        loading: true,
        user: {},//当前登录的user
        isUser: false,
        pageIndex: 1,
        pageInfo: {},
        company: {},
        selectType: '',
        form: {
          minMoney: '',
          maxMoney: '',
          positionName: '',
          companyName:'',
          workExp: '',//工作经验
          jobNature: '',
          eduRequirements: '',
          jobclassify: '',
          bussionName: '',
          isdeleted: 0,//未被删除
          ischeck: 1,//审核通过
          isOpen: 1
        },
      }
    },
    components: {
      Header1,
      jobClassify,
      job
    },
    //开始时执行
    created() {
      var pname = this.$route.query.positionName;
      var pname2 = this.$route.query.companyName;
      if (pname !== ' ') {
        this.form.positionName = pname
      }
      if (pname2 !== ' ') {
        this.form.companyName = pname2
      }
      this.selectByName()
      this.setUser()//记录登录的user
    },

    methods: {
      selectByName: async  function () {
        this.loading = true;
        await this.$ajax.post(this.$config.url + `/position/selectPosition/${this.pageIndex}`, this.form)
            .then(res => {
              this.pageInfo = res.data;
            }).finally(() => {
        });
        this.loading = false;
      },
      getJobClick(getJobClick) {
        this.form.jobclassify = getJobClick
      },
      setUser() {
        var user = this.$store.state.user;
        if (JSON.stringify(user) !== "{}") {
          this.user = user;
          this.isUser = true;
        }
      },
      handlePage(val) {
        //console.log(val)
        this.pageIndex = val
        //加载数据
        this.selectByName()
      },
      makeSimpleDate(date) {
        return makeSimpleDate(date);
      },
      makeDate(date) {
        return makeDate(date)
      },
      goPositionDetail(positionId) {
        this.$router.push(`/positionDetail/${positionId}`)
      },
      goCompanyDetail(companyId){
        this.$router.push({
          path:'/CompanyDetail',
          query:{companyId:companyId}
        })
      },
      //投递简历
      setApplicants(positionId){
        this.$ajax.post(this.$config.url + "applicants/AddApplicant", {
          "positionId": positionId,
          "userId":this.user.userId,
          "applicationType":0,
        }).then(res => {
          if (res.data=== "succ") {
            this.$message.success({
              showClose: true,
              message: '投递成功！'
            })
          } else if(res.data=== "isExist"){
            this.$message.warning({
              showClose: true,
              message: '已经投递过该岗位！'
            })
          }
          else {
            this.$message.error("出错了，无这个职位信息")
          }
        })
      }
    },
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
    },
  }
</script>

<style scoped>
  em{
    font-style: normal;
  }
  .apply {
    position: absolute;
    right: 0;
    color: #fff;
    font-size: 16px;
    line-height: 25px;
    cursor: pointer;
  }

  .apply:hover {

  }

  .hot_pos li {
    padding: 13px;
    line-height: 25px;
    position: relative;
  }

  .hot_pos .apply a {
    color: #fff;
    display: block;
    padding: 0 8px;
  }

  .hot_pos .apply a:hover {
    color: #fff;
  }

  .hot_pos .apply a.sended {
    background: #bfbfbf;
    width: 64px;
    text-align: center;
  }

  .hot_pos .odd {
    background: #fafafa;
  }

  .hot_pos a {
    font-size: 16px;
    color: #333;
  }

  .hot_pos a.btn {
    color: #fff;
  }

  .hot_pos a:hover {
    color: #0d9572;
  }

  .hot_pos a.btn:hover {
    color: #fff;
  }

  .hot_pos a.wb {
    font-size: 14px;
    color: #777;
  }

  .hot_pos a.wb:hover {
    color: #555;
  }

  .hot_pos_l {
    float: left;
    width: 360px;
  }

  .hot_pos_l a {

    text-decoration:none;
  }

  .hot_pos_l a span {
    color: #0d9572;
    margin: 0;
  }

  .hot_pos span {
    margin-right: 10px;
  }

  /**add nancy**/
  .hot_posHotPosition span {
    white-space: nowrap;
  }

  .hot_pos_r {
    float: right;
    width: 338px;
    margin-left: 20px;
  }

  .hot_pos_r .recompany {
    margin-right: 80px;
  }

  .hot_pos_r a span {
    color: #0d9572;
    margin: 0;
  }

  .hot_pos .recommend {
    font: 24px Candara;
    color: #e46a4a;
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
  }

  .hot_pos .recommend span {
    float: right;
    width: 200px;
    text-align: center;
    font: 14px 宋体;
    color: #777;
    border: 2px solid #e1e1e1;
    background: #fff;
    padding: 3px;
    position: absolute;
    right: -80px;
    *top: 30px;
    display: none;
  }

  .hot_pos .recommend:hover span {
    display: block;
  }

  .hot_pos .recommend em {
    font-size: 12px;
    color: #999;
  }

  .c7 {
    color: #777;
  }

  ul.reset {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .companyTags li {
    font-size: 12px;
    float: left;
    padding: 0 5px;
    background: #fff;
    border: 1px solid #a9a9a9;
    color: #a9a9a9;
    margin: 5px 15px 0 0;
    line-height: 18px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .mb20 {
    margin-bottom: 20px;
  }

  .mb0 {
    margin-bottom: 0 !important;
  }

  .mb50 {
    margin-bottom: 50px;
  }

  .mt20 {
    margin-top: 20px;
  }

  odd.hot_pos .recommend {
    font: 24px Candara;
    color: #e46a4a;
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
  }

  .resume div.clearfix {
    margin: 0;
    width: 100%;
  }

  .resume div.clearfix a {
    margin: 0 6px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>